<template>
    <div id="threeBox" ></div>
</template>

<script>
import * as THREE from "three";
export default {
  name: "basic1",
  data() {
    return {
    }
  },

  methods: {

    init() {
      // 获取让其宽高相等
      let w = document.getElementById("threeBox").offsetWidth;
      let h = document.getElementById("threeBox").offsetHeight;
      
      // 创建场景
      let scene = new THREE.Scene();

      // 创建摄像机
      let camera = new THREE.PerspectiveCamera(70, w / h, 0.1, 100); // 视野角度  ， 长宽比  ， 最近看到的距离， 最远）
      camera.position.set(-20,20,30);//相机位置
      camera.lookAt(scene.position); //将相机指向场景

      //创建渲染器 (画布)
      let renderer = new THREE.WebGLRenderer();  //内容渲染位置
      renderer.setClearColor(0xeeeeee); //canvas画布颜色 
      renderer.setSize(w,h); //canvas 画布大小 ***  

      // 创建坐标系
      let axes = new THREE.AxesHelper(10); //坐标系的长度
      scene.add(axes); //坐标系添加到场景中

      // 创建地面
      // let planeGeometry = new THREE.PlaneGeometry(60, 20); // 创建地面的大小
      // let planeMaterial = new THREE.MeshBasicMaterial({ color: 'blue' }); //地面的材质
      // let plane = new THREE.Mesh(planeGeometry, planeMaterial); // 创建地面
      // plane.rotation.x = -0.5 * Math.PI; // 旋转角度
      // plane.position.x = 15; // 设置地面 xyz 轴的位置
      // plane.position.y = 0;
      // plane.position.z = 0;
      // scene.add(plane); // 将地面添加到坐标轴中

      // 创建一个几何体
      let geometry = new THREE.BoxGeometry(10,10,10) //几何体大小  // xyz
      let material = new THREE.MeshBasicMaterial({color: 0x3f0b0b})  //网格基础材质
      let cube = new THREE.Mesh(geometry, material) //创建几何体
      scene.add(cube)
      

      
      document.getElementById("threeBox").appendChild(renderer.domElement); // 将DOM元素插入到 html中

      function animate() {
        // 动起来
        cube.position.x += 0.1;
        cube.position.y += 0.1;
        cube.position.z += 0.1;
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;
        if(cube.position.x >= 20){
          cube.position.x = 0;
          cube.position.y = 0;
          cube.position.z = 0;
        }
        // console.log('cube.position',cube.position)
        requestAnimationFrame( animate ); //循环调用
        renderer.render( scene, camera );
      }
      animate();
    },
  },

  watch: {},
  computed: {},

  created() {},
  mounted() {
    this.init();
  },
  beforeDestroy() {},
};
</script>

<style scoped lang="less">
#threeBox{
  width: 400px;
   height: 400px ; 
   position: absolute;
   right:0;
   bottom: 0;
}
</style>